<template>
    <el-cascader
        ref="cascader"
        v-model="ids"
        v-bind="$attrs"
        :props="props"
        :options="options"
        :show-all-levels="false"
        placeholder="请选择"
        style="width: 100%"
        @change="change"
    />
</template>

<script>
import number from '@/directives/number'
import { OrgModel, UserModel } from '@/models'

export default {
    name: 'OrgSelect',
    props: {
        isFilter: {
            type: Boolean,
            default: false
        },
        value: {
            type: [Array, Number, String],
            default: () => []
        },
        props: {
            type: Object,
            default: () => ({
                value: 'id',
                label: 'name',
                checkStrictly: true
            })
        }
    },
    data() {
        return {
            model: new OrgModel(),
            userModel: new UserModel(),
            ids: this.value,
            options: [],
            firstLeaveId: ''
        }
    },
    watch: {
        value(newValue) {
            this.ids = newValue
        }
    },
    created() {
        if (this.isFilter) {
            this.getFilterList()
        } else {
            this.getList()
        }
    },
    methods: {
        change(val) {
            this.$emit('update:value', val)
            this.$emit('change', val, this.options)

            if (Array.isArray(val) && val.length > 0) {
                const nodes = this.$refs.cascader.getCheckedNodes()
                this.$emit('update:name', nodes[0].label)
            } else if (val && typeof val.toString() === 'string') {
                const name = this.getLabelsByValue(this.options, this.ids)
                this.$emit('update:name', name)
            }

            // 选择后自动关闭
            this.$refs['cascader'].dropDownVisible = false
            // 下面自动关闭，会导致再次打开需要点2次
            // const el = document.getElementsByClassName('el-cascader__dropdown')
            // el.forEach(item => {
            //     item.style.display = 'none'
            // })
        },
        getList() {
            this.model.getListAll().then((res) => {
                this.options = res
                // ids可能是多个组成的数组，也可能是单个的id，单个时从dom中找不到
                if (Array.isArray(this.ids) && this.ids.length > 0) {
                    this.$nextTick(() => {
                        this.$emit('update:name', this.$refs['cascader'].getCheckedNodes()[0].label)
                    })
                } else if (this.ids && typeof this.ids.toString() === 'string') {
                    const name = this.getLabelsByValue(this.options, this.ids)
                    this.$emit('update:name', name)
                }
            })
        },
        getFilterList() {
            const data = {
                userId: this.$store.getters.avatar.id,
                // departType: 2, // 2 管理处
            }
            this.userModel.getManageSubDeparts(data).then((res) => {
                // this.options = res.departs || []
                // 把第一级的昭通高速排除在外
                if (res.departs && res.departs[0]) {
                    this.options = res.departs[0].children
                    this.firstLeaveId = res.departs[0].id
                }
                
                if (Array.isArray(this.ids) && this.ids.length > 0) {
                    this.$nextTick(() => {
                        this.$emit('update:name', this.$refs['cascader'].getCheckedNodes()[0].label)
                    })
                } else if (this.ids && typeof this.ids.toString() === 'string') {
                    const name = this.getLabelsByValue(this.options, this.ids)
                    this.$emit('update:name', name)
                }
            })
        },
        getLabelsByValue(options, value) {
            for (const option of options) {
                if (option.id === value) {
                    return option.name
                } else if (option.children) {
                    const childLabel = this.getLabelsByValue(option.children, value)
                    if (childLabel) {
                        return childLabel
                    }
                }
            }
            return null
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
